<template>
  <div>
    <el-table
        :data="workList"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="workId" align="center" fixed label="帖子ID" sortable width="150">
        </el-table-column>
        <el-table-column prop="header" align="center" label="帖子标题" sortable width="300">
        </el-table-column>
        <el-table-column prop="user.username" align="center" label="创建用户" sortable width="180">
        </el-table-column>
        <el-table-column prop="goodNum" align="center" label="点赞数" sortable width="120">
        </el-table-column>
        <el-table-column prop="collectNum" align="center" label="收藏数" sortable width="120">
        </el-table-column>
        <el-table-column align="center" label="审批结果" width="110">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isPass === 1" type="success" plain>审批通过</el-tag>
            <el-tag v-if="scope.row.isPass === 0" type="info" plain>待审批</el-tag>
            <el-tag v-if="scope.row.isPass === 2" type="danger" plain>审批未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" sortable label="创建日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
            {{ scope.row.gmtCreate }}</template
          >
        </el-table-column>
        <el-table-column fixed="right" align="center" width="200">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="workName"
              size="mini"
              @keyup.enter.native="handleSearch(scope)"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope" align="center">
            <el-button
              v-if="scope.row.isPass === 0"
              width="100"
              size="medium"
              @click="handleShow(scope.row)"
              >审批</el-button
            >
            <el-button
              v-else
              width="100"
              size="medium"
              type="primary"
              @click="handleShow(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    <!-- <div style="margin-top: 20px">
      <el-button @click="deleteSelect()">删除选中</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div> -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getWorkPage"
    />
  </div>
</template>

<script>
import work from "@/api/work"

export default {
  data() {
    return {
      workList: [],
      workQuery: {},
      ids: [],
      previewSrcList: [],
      current: 1, //页码
      limit: 8, //每页多少行
      total: 0 ,//总记录数,
      multipleSelection: [],
      workName: '',
    }
  },

  created() {
    this.getWorkPage();
  },

  methods: {
    getWorkPage(current = 1) {
      this.current = current
      work.getWorkPageVo(this.current, this.limit).then( res => {
        this.previewSrcList = []
        this.workList = res.data.workList;
        this.total = res.data.total;
        this.workList.forEach((work) => {
        this.previewSrcList.push(work.avatar)
        })
      })
    },

    getWorkPageQuery(current = 1) {
        this.current = current
        work.getWorkPageQueryVo(this.current, this.limit, this.workQuery).then(res => {
            this.previewSrcList = []
            this.workList = res.data.workList;
            this.total = res.data.total;
        });
      },

    // 反选和取消
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 批量删除
    deleteSelect() {
      this.$confirm("此操作将永久删除这些摄影师, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          banner.deleteAllSelect(this.ids).then((res) => {
            if (res.success) {
              this.getBannerPageQuery();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "出现故障,请稍后",
                type: "failure",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    formatter(row, column) {
      return row.address;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val;
    },

    // 跳转编辑或添加页面
    handleShow(row) {
      this.$router.push({ path: "/work/show", query: { work: JSON.stringify(row) } });
    },
    handleSearch(scope) {
        this.workQuery.header = this.workName
        if (this.workName.length > 0) {
          this.getWorkPageQuery()
        } else {
          this.getWorkPage();
          this.$message({
            message: "您的搜索为空,搜索全部内容",
            type: "info",
          });
        }
        this.workName = ''
    },
  }
};
</script>

<style scope>
</style>